<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=600,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
		<title>game</title>
		<link rel="stylesheet" type="text/css" href="../css/game.css" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
	</head>

	<body>
		<div class="conter">

			<div class="top">
				<div class="beijing"><img src="../img/game/九宫格_01.jpg" /></div>
				<div class="shuoming"><img src="../img/game/11.png" /></div>
				<div class="music">
					<img src="../img/game/12.png" />
				</div>
				<div class="guize"><img src="../img/game/13.png" /></div>
			</div>
			<div class="center"><img src="../img/game/123_02.jpg"/></div>
			<div class="center1">
				<div class="liwu1 liwu_z">
					<img src="../img/game/1.png" />
					<div class="liwu"></div>
				</div>
				<div class="liwu2 liwu_z">
					<img src="../img/game/2.png" />
					<div class="liwu"></div>
				</div>
				<div class="liwu3 liwu_z">
					<img src="../img/game/3.png" />
					<div class="liwu"></div>
				</div>
			</div>
			<div class="center2">
				<div class="liwu0 liwu_z">
					<img src="../img/game/8.png" />
					<div class="liwu"></div>
				</div>
				<div class="bei"><img src="../img/game/qaz.png" />
					<div class="start"><img src="../img/game/start.png" /></div>
				</div>
				<div class="liwu4 liwu_z">
					<img src="../img/game/4.png" />
					<div class="liwu"></div>
				</div>
			</div>
			<div class="center3">
				<div class="liwu7 liwu_z">
					<img src="../img/game/7.png" />
					<div class="liwu"></div>
				</div>
				<div class="liwu6 liwu_z">
					<img src="../img/game/6.png" />
					<div class="liwu"></div>
				</div>
				<div class="liwu5 liwu_z">
					<img src="../img/game/5.png" />
					<div class="liwu"></div>
				</div>
			</div>
		</div>

		<script src="../js/jquery-2.1.0.js"></script>

		<script>
			//自动播放
			var audio = document.createElement('audio');
			audio.src = '../music/Christmas.mp3';
			audio.autoplay = true;
			document.body.appendChild(audio);
			document.addEventListener('touchstart', function() {
				//增加一个touchstart交互事件，触屏后播放音乐
				audio.play();
				//播放音频后移除touchstart事件的当前匿名函数
				document.removeEventListener('touchstart', arguments.callee, false);
			}, false);

			var conter = document.getElementsByClassName("conter")[0];
			var music = conter.getElementsByClassName("music")[0];

			music.addEventListener("click", function() {

				if(document.body.contains(audio) == true) {
					document.body.removeChild(audio);
				} else {
					document.body.appendChild(audio);
					audio.play();
				}
			})

			var shuoming = document.getElementsByClassName("shuoming")[0];
			var guize = document.getElementsByClassName("guize")[0];
			var center = document.getElementsByClassName("center")[0];
			var center1 = document.getElementsByClassName("center1")[0];
			var center2 = document.getElementsByClassName("center2")[0];
			var center3 = document.getElementsByClassName("center3")[0];
			

			shuoming.addEventListener("click", function() {
				guize.style.display = "block";
				center.style.display = "block";
				center1.style.display = "none";
				center2.style.display = "none";
				center3.style.display = "none";
			})
			guize.addEventListener("click", function() {
				guize.style.display = "none";
				center.style.display = "none";
				center1.style.display = "block";
				center2.style.display = "block";
				center3.style.display = "block";
			})

			//转盘点击开始
			var run = null; //定时器
			var stop = 1; //停止的位置
			var bushu = -1; //移动了的步数
			var isClick = true;
			var run2 = null;
			
			//初始位置
			
			
			$(".start").click(function() {
				if(isClick == true) {
					isClick = false;
					bushu = 0;
					stop = Math.floor(Math.random() * 8 + 1);
					run = setInterval(run1, 100);
				}

			})

			function run1() {
				if(bushu >= (32 + stop)) {
					$(".liwu" + (bushu % 8)).children(".liwu").css("display", "block");
					bushu = stop;
					clearInterval(run); //停止转动  
					isClick = true;
					run2 = setInterval(run3,500);
					return;
				}
				bushu++;

				$(".liwu").each(function(index, element) {
					$(this).css("display", "none");
				});
				$(".liwu" + (bushu % 8)).children(".liwu").css("display", "block");
				
			}
			
			function run3(){
				location.href = "congratulation.html?bushu=" +bushu;
				clearInterval(run2);
			}
		</script>

	</body>

</html>